<!doctype html>
<html lang="zh-CN" th:replace="web-layout :: layout(~{::title}, ~{::style}, ~{}, ~{::script}, ~{::body}, ${session.pageActive})"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>考试解析</title>
    <style>
        ul.fyl-pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
            height: 300px;
            overflow-y: auto;
        }

        ul.fyl-pagination li {
            display: inline;
        }

        ul.fyl-pagination li a {
            color: black;
            float: left;
            text-decoration: none;
            transition: background-color .3s;
            /*border: 1px solid #ddd;*/
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: white solid 1px;
            border-top: white solid 1px;
        }

        ul.fyl-pagination li a.fyl-active {
            background-color: #4CAF50;
            color: white;
            /*border: 1px solid #fff;*/
        }

        .affix {
            top: 10px;
        }

        .qst-num {
            border: 1px solid #ccc;
        }

        .red{
            background-color: red;
            color: white!important;
        }
        .green{
            background-color: green;
            color: white!important;
        }
        .orange{
            background-color: orange;
            color: white!important;
        }
    </style>
    <script>
        //响应数据
        function responseHandler(res) {
            return res.data
        }

        function beginTimeFormatter(value, row, index) {
            return formatDateTime(row.beginTime);
        }

        function endTimeFormatter(value, row, index) {
            return formatDateTime(row.endTime);
        }

        var $table = $('#table')

        function operateFormatter(value, row, index) {
            return [
                '<button type="button" class="btn btn-primary btn-xs startExamBtn">开始考试</button>',
            ].join('');
        }

        var openIndex = 0;
        window.operateEvents = {
            'click .startExamBtn': function (e, value, row, index) {
                openIndex = layer.open({
                    type: 2,
                    area: ['50%', '50%'],
                    scrollbar: false,
                    title: row.name + "---试卷列表",
                    content: '/web/user/exam/paper/list/' + row.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            },
        }

        function startPaper(paper) {
            ajaxText("/web/user/exam/paper/info/" + paper.id, {}, function (html) {
                $("body").html(html);
            })
            //关闭
            layer.close(openIndex);
        }

        // $(document).ready(function(){
        //     var range = 0;             //距下边界长度/单位px
        //     var totalheight = 0;
        //     var main = $("#dataList");                     //主体元素
        //     $(window).scroll(function(){
        //         var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
        //         // console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
        //         // console.log("页面的文档高度 ："+$(document).height());
        //         // console.log('浏览器的高度：'+$(window).height());
        //
        //         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
        //         if(($(document).height()-range) <= totalheight) {
        //             dataList()
        //         }
        //     });
        // });

        $("#loadMore").click(function () {
            dataList()
        })

        var main = $("#dataList");                     //主体元素
        function dataList() {
            $.post("/exam/child/list", {name: $("#name").val()}, function (result) {
                main.append(result);
            });
        }

        var lefttime=Number($("#paperTime").val());
        var div = document.getElementById("showtime");
        div.innerHTML = useTime(lefttime);
    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a href="/user/exam/list">考试列表</a></li>
    <li><a th:href="@{/user/paper/list/{id}/{userExamId}(id=${examId},userExamId=${userExamId})}">试卷列表</a></li>
    <li class="active" th:text="${paper.name}"></li>
</ol>
<input type="hidden" id="paperTime" th:value="${userPaper.useTime}">
<div class="clearfix">
    <div class="pull-left" data-spy="affix" data-offset-top="178" data-offset-bottom="0">
        <p>使用时间：<span id="showtime"></span></p>
        <ul class="fyl-pagination" style="width: 175px;">
            <li th:each="qst:${questionList}"><a th:href="'#qst'+${qst.id}" th:class="${qst.status}!=null and ${qst.status}==0?'red':(${qst.status}!=null and ${qst.status}==1?'green':(${qst.status}!=null and ${qst.status}==2?'orange'))" th:text="${qstStat.count}"></a></li>
            <!--            <li><a class="fyl-active" href="#">2</a></li>-->
        </ul>
    </div>
    <div class="pull-right" style="width: calc(100% - 203px);">
        <th:block th:each="qst:${questionList}" th:object="${qst}">
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}!='D' and *{type}!='C'">
                <p>[[${qstStat.count}]].[(*{content})]</p>
                <div>
                    <p></p>
                    <p th:each="option:*{optionDtoList}">[[${option.option}]].[(${option.content})]</p>
                </div>
                <div style="background: #fff;border: 1px solid #ccc;padding: 5px;">
                    <p>正确答案：[(*{answer})]</p>
                    <p>你的答案：[[*{userAnswer}]]</p>
                    <p>解析：[(*{analysis})]</p>
                    <div>得分：[[*{userScore}]]</div>
                </div>
            </div>
            <!--判断题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='C'">
                <p>[[${qstStat.count}]].[(*{content})]</p>
                <div>
                    <p></p>
                    <p th:each="option:*{optionDtoList}">[(${option.content})]</p>
                </div>
                <div style="background: #fff;border: 1px solid #ccc;padding: 5px;">
                    <p>正确答案：[(*{answer})]</p>
                    <p>你的答案：[[*{userAnswer}]]</p>
                    <p>解析：[(*{analysis})]</p>
                    <div>得分：[[*{userScore}]]</div>
                </div>
            </div>
            <!--主观题-->
            <div class="well well-sm" th:id="qst+*{id}" th:if="*{type}=='D'">
                <p>[[${qstStat.count}]].[(*{content})]</p>
                <p>你的答案：[[*{userAnswer}]]</p>
                <p>解析：[(*{analysis})]</p>
                <div>得分：[[*{userScore}]]</div>
            </div>
        </th:block>
    </div>
</div>
<!--<div class="row">
    <div class="col-md-2">
        <ul class="fyl-pagination">
            <li><a href="#">1</a></li>
            <li><a class="fyl-active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
        </ul>
    </div>
    <div class="col-md-10">
        <div class="well well-sm">
            <p>11111111</p>
            <p>11111111</p>
            <p>11111111</p>
            <p>11111111</p>
        </div>
    </div>
</div>-->
</body>
</html>